<template>
  <div class="container">
    <div class="main-tab">
      <x-header id="header" slot="header" :left-options="{showBack: false}" >
        <x-icon type="ios-arrow-back" slot="left" style="fill:#fff;" @click="back"></x-icon>
        <span slot="default" class="header-tit">商品分类</span>
      </x-header>
      <div class="main-headerAndTab">
        <ul class="banner">
          <li :class="{activeli:flag1}">
            <div class="title" @click="handle1" :class="{activetitle:flag1}">
              名烟
            </div>
          </li>
          <li :class="{activeli:flag2}">
            <div class="title" @click="handle2" :class="{activetitle:flag2}">
              名酒
            </div>
          </li>
        </ul>
        <div class="hot-brand">
          <div class="hot-brand-title">热门品牌</div>
          <div class="brand-classification-one" v-show="flag1">
            <div class="smoke" v-for="(item,index) in hotBrandList" :key="item.id">
              <img src="../../../static/icon/timg.jpg" alt="" class="smoke-img">
              <div class="smoke-name">中华</div>
            </div>
            <div class="smoke all-brand" @click="allbrand">
              全部品牌 <img src="../../../static/icon/right.png" class="all-brand-icon">
            </div>
          </div>
          <div class="brand-classification-one" v-show="flag2">
            <div class="smoke" v-for="(item,index) in hotBrandList" :key="item.id">
              <img src="../../../static/icon/timg.jpg" alt="" class="smoke-img">
              <div class="smoke-name">茅台</div>
            </div>
            <div class="smoke all-brand" @click="allbrand">
              全部品牌 <img src="../../../static/icon/right.png" class="all-brand-icon">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {hotBrands} from '@/api/good'
    export default {
        name: "goodstype",
      data(){
          return{
            goodsCategory:[{
              id:1,
              name:'名烟'
            },{
              id:2,
              name:'名酒'
            }],
            flag1:true,
            flag2:false,
            goodsType:1,
            hotBrandList:[
              {
                id:0,
              },
              {
                id:1,
              },
              {
                id:2,
              },
              {
                id:3,
              },
              {
                id:4,
              },
              {
                id:5,
              },
              {
                id:6,
              },
              {
                id:7,
              },
            ]
          }
      },
      methods:{
        back(){
          this.$router.go(-1)
        },
        handle1(){
          this.flag1=true;
          this.flag2=false;
          this.goodsType=1;
        },
        handle2(){
          this.flag1=false;
          this.flag2=true;
          this.goodsType=2;
        },
        allbrand(){
          this.globalData.goodsType=this.goodsType;
          this.$router.push({
            name:'goodsbrand'
          })
        },
        hotBrands(){
          hotBrands({}).then(res=>{
            console.log(res);
          })
        }
      },
      created(){
          this.hotBrands();
      }
    }
</script>

<style scoped>
  .header-tit{
    margin-top: 0.2rem;
  }
  #header{
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
  }
  .container{
    width: 100%;
    height: 100vh;
    background-color: #f5f5f5;
    position: relative;
  }
  .banner{
    position: fixed;
    height: 100vh;
    width: 6.79rem;
    background-color: #f5f5f5;
  }
  .banner li{
    height: 2.85rem;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #4A4A4A;
    letter-spacing: -0.41px;
    text-align: justify;
  }
  .banner li .title{
    height: 1.42rem;
    line-height:1.42rem;
    width: 5.35rem;
    display: flex;
    padding-left: 1.07rem;
  }
  .hot-brand{
    width: 100%;
    background: #FFFFFF;
    margin-left: 6.78rem;
    position: absolute;
  }
  .hot-brand-title{
    height: 2.85rem;
    background: #FFFFFF;
    line-height: 2.85rem;
    padding-left: 0.71rem;
  }
  .brand-classification-one{
    width: 20rem;
    height: 100vh;
  }
  .activeli{
    background-color: white;
  }
  .activetitle{
    font-size: 14px;
    color: #AD2532;
    letter-spacing: -0.41px;
    text-align: justify;
    border-left: #AD2532 solid 2px;
  }
  .smoke{
    width: 5.71rem;
    height: 8.57rem;
    margin-left: 0.71rem;
    margin-top: 0.71rem;
    float: left;
  }
  .smoke-img{
    width: 5.71rem;
    height: 5.71rem;
  }
  .smoke-name{
    height: 1.42rem;
    line-height: 1.42rem;
    font-size: 14px;
    color: #4A4A4A;
    letter-spacing: -0.41px;
    text-align: center;
  }
  .all-brand{
    width: 5.71rem;
    height: 5.71rem;
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #9B9B9B;
    letter-spacing: -0.35px;
    text-align: justify;
    justify-content: center;
  }
  .all-brand-icon{
    width: 0.57rem;
    height: 0.93rem;
    margin-left: 0.36rem;
  }
</style>
